<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">订单确认</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="l_bg" style="width: 710rpx;margin-top: 30rpx;">
				<view class="bor_jb">
					<view class="l_cen">
						<view class="l_top">
							<view class="l_bottom">
								<view class="index_d">
									<view class="index_d_a">
										<view class="index_d_a_a">
											<custom-image :lazy-load="true" width="128rpx" height="128rpx" radius="10rpx" lazy-load :src="goods_info.icon"></custom-image>
										</view>
										<view class="index_d_a_b">
											<view class="index_d_a_b_a">{{goods_info.name}}</view>
											<view class="index_d_a_b_d">
												<view class="index_d_a_b_d_a" v-if="goods_info.test_integral>0 && goods_info.test_price>0">
													<span>积分</span>{{goods_info.test_integral}}+<span>¥</span>{{goods_info.test_price}}
												</view>
												<view class="index_d_a_b_d_a" v-if="goods_info.test_integral>0 && goods_info.test_price<=0">
													<span>积分</span>{{goods_info.test_integral}}
												</view>
												<view class="index_d_a_b_d_a" v-if="goods_info.test_integral<=0 && goods_info.test_price>0">
													<span>¥</span>{{goods_info.test_price}}
												</view>
												<view class="index_d_a_b_d_a" v-if="goods_info.test_integral==0 && goods_info.test_price==0">
													免费
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="l_bg" style="width: 710rpx;margin-top: 30rpx;">
				<view class="bor_jb">
					<view class="l_cen">
						<view class="l_top">
							<view class="l_bottom">
								<view class="index_d">
									<view class="confirm_order_a">
										<view class="confirm_order_a_a" v-if="orderInfo.order_amount>0">
											<view class="confirm_order_a_a_a">商品金额</view>
											<view class="confirm_order_a_a_b">￥{{orderInfo.order_amount}}</view>
										</view>
										<view class="confirm_order_a_a" v-if="orderInfo.order_integral>0">
											<view class="confirm_order_a_a_a">所需积分</view>
											<view class="confirm_order_a_a_b">{{orderInfo.order_integral}}</view>
										</view>
										<view class="confirm_order_a_a" v-if="orderInfo.order_integral>0">
											<view class="confirm_order_a_a_a">可用积分</view>
											<view class="confirm_order_a_a_b">剩余{{orderInfo.user_integral}}积分</view>
										</view>
										<view class="confirm_order_a_a" v-if="orderInfo.rebate_amount>0">
											<view class="confirm_order_a_a_a">折扣金额</view>
											<view class="confirm_order_a_a_b">-¥{{orderInfo.rebate_amount}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 160rpx;"></view>
			<view class="index_c">
				<view class="index_c_b">
					<view class="index_c_b_a">需支付：</view>
					<view class="index_c_b_b" v-if="orderInfo.order_integral>0 && orderInfo.order_amount>0">
						<span>积分</span>{{orderInfo.order_integral}}+<span>¥</span>{{orderInfo.order_amount}}
					</view>
					<view class="index_c_b_b" v-if="orderInfo.order_integral>0 && orderInfo.order_amount<=0">
						<span>积分</span>{{orderInfo.order_integral}}
					</view>
					<view class="index_c_b_b" v-if="orderInfo.order_integral<=0 && orderInfo.order_amount>0">
						<span>¥</span>{{orderInfo.order_amount}}
					</view>
					<view class="index_c_b_b" v-if="orderInfo.order_integral==0 && orderInfo.order_amount==0">
						<span>¥</span>{{orderInfo.order_amount}}
					</view>
				</view>
				<view class="index_c_a" @click="handleOrderMethods('submit')">确认提交</view>
			</view>
		</view>
		<u-popup :show="coupon_show" mode="bottom" round="10"  @close="coupon_show=false">
			<view class="coupon_show_a">
				<view class="coupon_show_a_a">请选择优惠券</view>
				<view class="coupon_show_a_b">
					<view class="coupon_show_a_b_a" :style="'background-image:url('+coupon_bj+');'" v-for="(item, index) in CouponList">
						<view class="coupon_show_a_b_a_a">
							<price-format :price="item.money" firstSize='48' secondSize='36' :showSubscript="false"></price-format>
							<span>元</span>
						</view>
						<view class="coupon_show_a_b_a_b">
							<view class="coupon_show_a_b_a_b_a">{{item.name}}</view>
							<view class="coupon_show_a_b_a_b_b">{{item.use_time_tips}}</view>
							<view class="coupon_show_a_b_a_b_c">
								<view class="coupon_show_a_b_a_b_c_a">使用规则</view>
								<view class="coupon_show_a_b_a_b_c_b">
									<u-icon name="arrow-right" color="#626262" size="10"></u-icon>
								</view>
							</view>
						</view>
						<view class="coupon_show_a_b_a_c" @click="coupon_show_click(item.coupon_id)">使用</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import request from '@/common/request.js';
import {
	loadingType
} from '@/utils/type';
export default {
	data(){
		return {
			showLoading:true,
			coupon_show:false,
			coupon_bj:request.baseUrl_img+'/img/coupon_bj.png',
			o_dz_dingwei:request.baseUrl_img+'/img/o_dz_dingwei.png',
			gengduo_icon:request.baseUrl_img+'/img/gengduo_icon.png',
			couponId:0,
			CouponList:[],
			addressId:0,
			address:[],
			orderInfo:[],
			goods_info:[],
			info:[],
			uid:0,
		}
	},
	onLoad(options) {
		const data = JSON.parse(decodeURIComponent(options.data))
		this.info = data
		this.uid=uni.getStorageSync('uid');
		this.handleOrderMethods('info')
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
	},	
	mounted() {
		
	},
	methods: {
		coupon_click(){
			if(this.CouponList.length>0){
				this.coupon_show=true;
			}
		},
		coupon_show_click(couponId){
			this.couponId=couponId;
			this.coupon_show=false;
			this.handleOrderMethods('info');
		},
		goPage(url,type=1) {
			uni.navigateTo({
				url
			});
		},
		// 初始化页面数据
		async initPageData(paramsList) {
			let url='o-test_buy';
			let optsList = {
				url:url,
				method: 'post'
			};
			let _this=this;
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			try {
				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if(res.data.code == 200){
						this.goods_info = res.data.data.goods_info
						this.orderInfo = res.data.data
						this.$nextTick(() => {
							this.showLoading=false;
						})
					}else{
						uni.showToast({
						    title: res.data.msg,
							icon:'none',
						    duration: 2000
						});
						this.showLoading=false;
					}
				});
			} catch(err) {
				uni.showToast({
				    title:'网络异常，请重新进入页面',
					icon:'none',
				    duration: 2000
				});
				this.showLoading=false;
			}
		},
		// 订单提交
		async handleOrderSubmit(from) {
			this.showLoading_tj=true;
			let url='o-test_buy';
			let optsList = {
				url:url,
				method: 'post'
			};
			let _this=this;
			uni.showLoading({
				title: '提交中...',
				mask: true
			})
			try {
				request.httpTokenRequest(optsList, from).then(res => {
					uni.hideLoading();
					if(res.data.code ==200){
						uni.redirectTo({
							url: '/pages/confirm_order/order_details?order_sn='+res.data.data.order_sn+'&testorder_from='+_this.info.type+'&from=test'
						})
						
					}else{
						uni.showToast({
						    title: res.data.msg,
							icon:'none',
						    duration: 2000
						});
					}
				});
			} catch(err) {
				uni.showToast({
				    title:'网络异常，请重新进入页面',
					icon:'none',
				    duration: 2000
				});
				this.showLoading=false;
			}
		},
		// 订单处理
		handleOrderMethods(action) {
			// 订单提交数据
			const orderFrom = {
				action,
				info: this.info,
				coupon_id: this.couponId,
				uid: this.uid,
			}
			switch(action) {
				case 'info': 
					this.initPageData(orderFrom)
					break;
				case 'submit': 
					this.handleOrderSubmit(orderFrom)
					break;
			}
		},
	}
}
</script>

<style  lang="scss" scoped>
	.coupon_show_a{
		width: 750rpx;
		height: 1000rpx;
	}
	.coupon_show_a_a{
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	.coupon_show_a_b{
		height:800rpx;
		overflow-y: auto;
		width: 670rpx;
		margin: auto;
	}
	.coupon_show_a_b_a{
		width: 670rpx;
		height: 180rpx;
		border-radius: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 670rpx 180rpx;
		margin-top: 20rpx;
	}
	.coupon_show_a_b_a_a{
		float: left;
		width: 160rpx;
		height: 180rpx;
		text-align: center;
		line-height: 180rpx;
		font-size: 48rpx;
		font-family: D-DIN;
		font-weight: bold;
		color: #E71102;
	}
	.coupon_show_a_b_a_a span{
		font-size: 30rpx;
	}
	.coupon_show_a_b_a_b{
		height: 180rpx;
		float: left;
		width: 300rpx;
		margin-left: 30rpx;
	}
	.coupon_show_a_b_a_b_a{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-top: 35rpx;
	}
	.coupon_show_a_b_a_b_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
		line-height: 40rpx;
	}
	.coupon_show_a_b_a_b_c{
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
	}
	.coupon_show_a_b_a_b_c_a{
		float: left;
	}
	.coupon_show_a_b_a_b_c_b{
		float: left;
		margin-left:5rpx;
		margin-top:9rpx;
	}
	.coupon_show_a_b_a_c{
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient(139deg, #E71102, #E71102);
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-top: 45rpx;
		margin-left: 30rpx;
		float: left;
	}
	.index_c{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 0 55rpx;
	}
	.index_c_a{
		width: 195rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #62469B, #62469B);
		border-radius: 40rpx;
		margin-top:20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		float: right;
	}
	.index_c_b{
		float: left;
		line-height: 120rpx;
	}
	.index_c_b_a{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
	}
	.index_c_b_b{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102;
		float: left;
	}
	.index_c_b_b span{
		font-size: 24rpx;
	}
	.confirm_order_a{
		width: 700rpx;
		height: auto;
		padding: 0rpx 30rpx;
		margin: auto;
	}
	.confirm_order_a_a{
		height: 80rpx;
		line-height:80rpx;
	}
	.confirm_order_a_a_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		float:left;
	}
	.confirm_order_a_a_b{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		float:right;
	}
	.confirm_order_a_b{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		height: 120rpx;
		line-height: 120rpx;
	}
	.confirm_order_a_b_a{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: right;
	}
	.confirm_order_a_b_a span{
		font-size: 28rpx;
		color: #222222;
	}
	.confirm_order_b{
		height: 106rpx;
		line-height: 106rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 710rpx;
		margin: auto;
	}
	.confirm_order_b span{
		color:#E71102;
	}
	.confirm_order_b_a{
		float: left;
		width: 33.33%;
	}
	.index_d{
		width: 710rpx;
		margin: auto;
		height:auto;
		padding: 30rpx 0;
	}
	.index_d_a{
		width: 700rpx;
		height: auto;
		padding: 10rpx 30rpx;
		overflow: hidden;
	}
	.index_d_a_a{
		width: 128rpx;
		height:128rpx;
		border-radius:10rpx;
		overflow: hidden;
		float: left;
	}
	.index_d_a_b{
		width:410rpx;
		height: auto;
		float: left;
		position: relative;
		margin-left: 40rpx;
	}
	.index_d_a_b_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		margin-top: 25rpx;
	}
	.index_d_a_b_b{
		margin-top: 10rpx;
		overflow: hidden;
	}
	.index_d_a_b_b_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		float: left;
		line-height: 42rpx;
	}
	.index_d_a_b_d{
		overflow: hidden;
	}
	.index_d_a_b_d_a{
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF6000
	}
	.index_d_a_b_d_a span{
		font-size: 24rpx;
	}
	.index_d_a_b_d_b{
		float: right;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #fff;
		line-height: 50rpx;
	}
	.index_d_a_b_b_b{
		float: left;
	}
	.index_d_a_b_b_b_a{
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
	}
	.index_d_a_b_c{
		width: 44rpx;
		height: 44rpx;
		background-color: #E5E5E5;
		border-radius: 50%;
		position:absolute;
		right: -20rpx;
		top:0rpx;
		background-repeat: no-repeat;
		background-position:center;
		background-size: 21rpx 15rpx;
	}
	.index_d_a_b_cc{
		background-color:#24C68B;
	}
</style>
